<template>
  <div class="w-full h-full" style="background: #f8f8f8">

  <div class="w-full h-1/2 flex">
    <div class="w-6/12 h-full rounded-xl bg-white mr-2.5 p-3">
      <div class="flex items-center mb-2">
        <div class="flex items-center bg-indigo-50/60 rounded-lg py-0.5 px-2">
          <i class="iconfont icon-shishikucunshiyitu text-indigo-500 text-base"/>
          <span class="title font-semibold text-indigo-600 ml-1.5">{{$t('common.OverviewReceipt')}}</span>
        </div>
        <div class="flex-1 h-[1px] bg-gradient-to-r from-indigo-200 via-indigo-100/50 to-transparent ml-3"></div>
        <el-form :inline="true" :model="from" size="small" class="align-center search-form">
          <el-form-item class="label" :label="$t('iot.time')">
            <el-date-picker
              style="width: 220px"
              v-model="from.time"
              type="daterange"
              range-separator="-"
              :start-placeholder="$t('wms.startTime')"
              :end-placeholder="$t('wms.endTime')"
              class="custom-date-picker"
            />
          </el-form-item>
          <el-form-item class="label" :label="$t('wms.firstStatus')">
            <el-select v-model="from.status" clearable  :placeholder="$t('wms.pleaseSelect')">
              <el-option
                v-for="item in data.statusList"
                :key="item.value"
                :label="item.label"
                :value="item.value"
              />
            </el-select>
          </el-form-item>
          <el-button icon="Search" class="buttons" size="small" type="primary" @click="getSerch">查询</el-button>
        </el-form>
      </div>
      <div class="table-list w-full h-full">
      <el-table
        ref="tableRef"
        border
        id="out-table"
        :data="headerList"
        :fit="true"
        table-layout="fixed"
        header-align="center"
        style="width:100%;height: 80%;"
        :header-cell-style="{
        color: '#1e293b',
        textAlign: 'center',
        fontWeight: '600',
        background: 'linear-gradient(to bottom, #f8fafc, #f1f5f9)',
        borderColor: '#e2e8f0',
        height: '40px'
      }"
        :cell-style="{
        textAlign: 'center',
        color: '#334155',
        borderColor: '#e2e8f0',
        background: '#fff',
        height: '40px'
      }"
        :row-class-name="tableRowClassName"
        @row-click="handleRowClick"
      >
<!--        <el-table-column prop="billDate" label="订单日期"/>-->
        <el-table-column prop="poCode" :label="$t('common.poCode')" width="150"/>
        <el-table-column prop="receiptCode" :label="$t('common.receiptCode')" width="150"/>
        <el-table-column prop="businessDate" :label="$t('wms.dateOfDocument')" width="150"/>
        <el-table-column prop="materialCount" :label="$t('mes.totalNumberOfItems')"/>
        <el-table-column prop="materialQty" :label="$t('common.materialQty')"/>
        <el-table-column prop="status" :label="$t('wms.firstStatus')">
          <template #default="scope">
            <el-tag
              :type="scope.row.status === '已完成' ? 'success' : 'danger'"
              class="text-xs"
            >
              {{ scope.row.status }}
            </el-tag>
          </template>
        </el-table-column>>
      </el-table>

      <div class="flex justify-end mt-3">
        <el-pagination
          :current-page="data.page"
          :page-size="data.size"
          :page-sizes="[10, 20, 50, 100]"
          small
          background
          class="custom-pagination"
          layout="total, sizes, prev, pager, next, jumper"
          :total="data.headerTotal"
          @size-change="handleSizeChange"
          @current-change="handleCurrentChange"
        />
      </div>
        </div>

    </div>
    <div class="w-6/12 h-full p-3 rounded-xl border-slate-200 bg-white">
      <div class="flex items-center mb-2">
        <div class="flex items-center bg-indigo-50/60 rounded-lg py-0.5 px-2">
          <i class="iconfont icon-shishikucunshiyitu text-indigo-500 text-base"/>
          <span class="title font-semibold text-indigo-600 ml-1.5">{{$t('common.PurchaseOrderDetails')}}</span>
        </div>
        <div class="flex-1 h-[1px] bg-gradient-to-r from-indigo-200 via-indigo-100/50 to-transparent ml-3"></div>
      </div>
      <div class="table-list w-full h-full">
      <el-table
        ref="tableRef"
        border
        id="out-table"
        :data="detailList"
        :fit="true"
        table-layout="fixed"
        header-align="center"
        style="width:100%;height: 80%;"
        :header-cell-style="{
        color: '#1e293b',
        textAlign: 'center',
        fontWeight: '600',
        background: 'linear-gradient(to bottom, #f8fafc, #f1f5f9)',
        borderColor: '#e2e8f0',
        height: '40px',
      }"
        :cell-style="{
        textAlign: 'center',
        color: '#334155',
        borderColor: '#e2e8f0',
        background: '#fff',
        height: '40px'
      }"
        :row-class-name="tableRowClassName"

        @row-click="handleRigthRowClick"
      >
        <el-table-column prop="receiptCode" :label="$t('common.receiptCode')" width="150"/>
        <el-table-column prop="contractNumber" :label="$t('common.contractNumber')" width="150"/>
        <el-table-column prop="materialCode" :label="$t('agv.materialCode')"/>
        <el-table-column prop="materialName" :label="$t('agv.materialName')"/>
        <el-table-column prop="instockBatch" :label="$t('inventoryInforSummary.inboundBatch')"/>
        <el-table-column prop="status" :label="$t('wms.firstStatus')">
          <template #default="scope">
            <el-tag
              :type="scope.row.status === '已完成' ? 'success' : 'danger'"
              class="text-xs"
            >
              {{ scope.row.status }}
            </el-tag>
          </template>
        </el-table-column>>
      </el-table>
      <div class="flex justify-end mt-3">
        <el-pagination
          :current-page="data.currentPage"
          :page-size="data.currentSize"
          :page-sizes="[10, 20, 50, 100]"
          small
          background
          class="custom-pagination"
          layout="total, sizes, prev, pager, next, jumper"
          :total="data.detailTotal"
          @size-change="handleCurrentSizeChange"
          @current-change="handleCurrentPageChange"
        />
      </div>
      </div>
    </div>
  </div>

  <div class="w-full h-1/2 rounded-xl bg-white mt-3 pt-3 pl-3 pr-3">
    <div class="flex items-center mb-2">
      <div class="flex items-center bg-indigo-50/60 rounded-lg py-0.5 px-2">
        <i class="iconfont icon-shishikucunshiyitu text-indigo-500 text-base"/>
        <span class="title font-semibold text-indigo-600 ml-1.5">{{$t('common.BarcodeStorageInformation')}}</span>
      </div>
      <div class="flex-1 h-[1px] bg-gradient-to-r from-indigo-200 via-indigo-100/50 to-transparent ml-3"></div>
      <el-form :inline="true" :model="from" size="small" class="align-center search-form">
        <el-form-item class="label" :label="$t('iot.time')">
          <el-date-picker
            style="width: 220px"
            v-model="from.time2"
            type="daterange"
            range-separator="-"
            :start-placeholder="$t('wms.startTime')"
            :end-placeholder="$t('wms.endTime')"
            class="custom-date-picker"
          />
        </el-form-item>
        <el-form-item class="label" :label="$t('wms.firstStatus')">
          <el-select v-model="from.status2" clearable :placeholder="$t('wms.pleaseSelect')">
            <el-option
              v-for="item in data.statusList2"
              :key="item.value"
              :label="item.label"
              :value="item.value"
            />
          </el-select>
        </el-form-item>
        <el-button icon="Search" class="buttons" size="small" type="primary" @click="getEndSerch">{{$t('wms.search')}}</el-button>
      </el-form>
    </div>
    <div class="table-list w-full h-full">
      <el-table
        ref="tableRef"
        border
        id="out-table"
        :data="endList"
        :fit="true"
        table-layout="fixed"
        header-align="center"
        v-loading="endLoading"
        style="width:100%;height: 80%;"
        :header-cell-style="{
        color: '#1e293b',
        textAlign: 'center',
        fontWeight: '600',
        background: 'linear-gradient(to bottom, #f8fafc, #f1f5f9)',
        borderColor: '#e2e8f0',
        height: '40px'
      }"
        :cell-style="{
        textAlign: 'center',
        color: '#334155',
        borderColor: '#e2e8f0',
        background: '#fff',
        height: '40px'
      }"
      >
        <el-table-column prop="barcode" :label="$t('wms.barcode')" width="150" show-overflow-tooltip/>
        <el-table-column prop="poCode" :label="$t('common.poCode')" width="150" show-overflow-tooltip/>
        <el-table-column prop="receiptCode" :label="$t('common.receiptCode')" width="150" show-overflow-tooltip/>
        <el-table-column prop="contractNumber" :label="$t('common.contractNumber')" width="150" show-overflow-tooltip/>
        <el-table-column prop="materialCode" :label="$t('agv.materialCode')" show-overflow-tooltip/>
        <el-table-column prop="materialName" :label="$t('agv.materialName')"/>
        <el-table-column prop="qty" :label="$t('agv.qty')"/>
        <el-table-column prop="status" :label="$t('wms.firstStatus')">
          <template #default="scope">
            <el-tag
              :type="scope.row.status === '已入库' ? 'success' : 'danger'"
              class="text-xs"
            >
              {{ scope.row.status }}
            </el-tag>
          </template>
        </el-table-column>
        <el-table-column prop="locationCode" :label="$t('common.Storagelocation')"/>
        <el-table-column prop="instockTime" :label="$t('common.Storagetimer')" show-overflow-tooltip/>
        <el-table-column prop="instockPerson" :label="$t('common.Storagepersonnel')"/>
        <el-table-column prop="instockBatch" :label="$t('inventoryInforSummary.inboundBatch')"/>
      </el-table>

      <div class="flex justify-end mt-3">
        <el-pagination
          :current-page="data.endpage"
          :page-size="data.endSize"
          :page-sizes="[10, 20, 50, 100]"
          small
          background
          class="custom-pagination"
          layout="total, sizes, prev, pager, next, jumper"
          :total="data.endListTotal"
          @size-change="handleEndSizeChange"
          @current-change="handleEndCurrentChange"
        />
      </div>
    </div>

  </div>
  </div>
</template>
<script setup>
import moment from 'moment';
import { onMounted, reactive, ref } from 'vue'
import { getPoHeaderList, getPoDetailList, getReceiptHeaderList, getReceiptDetailList,getBarcodeByReceiptOrPo } from '@/api/warehouseEntryApi'


const headerList = ref([])
const detailList = ref([])
const endList = ref([])
const endLoading = ref(false)
const  data  = reactive({
  size:10,
  page:1,
  headerTotal:0,
  detailTotal:0,
  endListTotal:0,
  currentSize:10,
  currentPage:1,
  endSize:10,
  endpage:1,
  statusList:[
    {
      label: '全部',
      value: ''
    },
    {
      label: '已完成',
      value: '已完成'
    },
    {
      label: '未完成',
      value: '未完成'
    }
  ],
  statusList2:[
    {
      label: '全部',
      value: ''
    },
    {
      label: '已入库',
      value: '已入库'
    },
    {
      label: '未入库',
      value: '未入库'
    },
    {
      label: '出库',
      value: '出库'
    }
  ]
})
const from = reactive({
  time: [],
  status: '未完成',
  time2: [],
  status2: '',
})
const getHeaderList = async () => {
  try {
    const params = {
      startTime: from?.time?.[0] ? moment(from.time[0]).format('YYYY-MM-DD') : '',
      endTime:  from?.time?.[1] ? moment(from.time[1]).format('YYYY-MM-DD') : '',
      current:data.page,
      size:data.size,
      status:from.status
    }
    const res = await getReceiptHeaderList(params)
    headerList.value = res.data.records
    data.headerTotal = res.data.total
  } catch (e) {
    console.log(e)
  }

}

const getDetailList = async (id) => {
  try {
    const params = {
      startTime: from?.time?.[0] ? moment(from.time[0]).format('YYYY-MM-DD') : '',
      endTime:  from?.time?.[1] ? moment(from.time[1]).format('YYYY-MM-DD') : '',
      current:data.currentPage,
      size:data.currentSize,
      docNo:id||'',
      status:from.status
    }
    const res = await getReceiptDetailList(params)
    detailList.value = res.data.records
    data.detailTotal = res.data.total
  } catch (e) {
    console.log(e)
  }

}

const getEndList = async (poCode,receiptCode) => {
  endLoading.value = true
  try {
    const params = {
      startTime: from?.time2?.[0] ? moment(from.time2[0]).format('YYYY-MM-DD') : '',
      endTime:  from?.time2?.[1] ? moment(from.time2[1]).format('YYYY-MM-DD') : '',
      current:data.endpage,
      size:data.endSize,
      // docNo:id||'',
      poCode:poCode||'',
      receiptCode:receiptCode||'',
      status:from.status2
    }
    const res = await getBarcodeByReceiptOrPo(params)
    endList.value = res.data.records
    data.endListTotal = res.data.total
  } catch (e) {
    console.log(e)
  } finally {
    endLoading.value = false
  }
}

const getSerch = () =>{
  getHeaderList()
  getDetailList()
  getEndList()
}
const getEndSerch=()=>{
  getEndList()
}

const getDefaultDateRange = () => {
  const today = moment(); // 今天
  from.time = [today.toDate(), today.toDate()]; // 设置开始和结束时间为今天
  from.time2 = [today.toDate(), today.toDate()]; // 设置开始和结束时间为今天

}
const tableRowClassName =(row, index)=>{
  return row.row.status == '未完成' ? 'incomplete' : '';
}

onMounted(async () => {
  await getDefaultDateRange()
  getHeaderList()
  getDetailList()
  getEndList()
})

const handleSizeChange = (val) => {
  data.size = val
  getHeaderList()
}
const handleCurrentChange = (val) => {
  data.page = val
  getHeaderList()
}
const handleCurrentSizeChange = (val) => {
  data.currentSize = val
  getDetailList()
}
const handleCurrentPageChange = (val) => {
  data.currentPage = val
  getDetailList()
}
const handleEndSizeChange = (val) => {
  data.endSize = val
  getEndList()
}
const handleEndCurrentChange = (val) => {
  data.endpage = val
  getEndList()
}
const handleRowClick =(row)=>{
  getDetailList(row.receiptCode)
  getEndList(row.poCode)
}
const handleRigthRowClick =(row)=>{
  getEndList(null,row.receiptCode)
}
</script>


<style scoped lang="scss">
:deep(.el-form) {
  height: 18px;
  display: flex;
  justify-content: center;
}



</style>
